<!-- style混乱，最好整理到style模块中 -->

<template>

   <div style="position: fixed; top: 0; left: 0; right: 0; z-index: 999;background: white; box-shadow: 0 5px 10px rgba(0,0,0,0.08);">
    <el-menu 
      class="el-menu-demo" 
      mode="horizontal" 
      style="background-color: transparent; align-items: center; border-bottom: none;"
    >
  


      <el-menu-item 
        v-for="(item, index) in menuItems" 
        :key="index" 
        :index="item.path" 
        :style="{ fontSize: '30px', padding: '0 30px' }"
        :class="{ 'is-active': isActive(item.path) }"  
        @click="navigateTo(item.path)"  
      >
        {{ item.name }}  
      </el-menu-item>
    </el-menu>
  </div>
  <div style="height: 10px;"></div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const menuItems = [
    { name: '本场信息', path: '/venue/venDashboard' },
    { name: '修改密码', path: '/venue/changePassword' },
]

const navigateTo = (path) => {
    router.push(path)
}

// 高亮显示，改为用startwith，为了在有多个子路径的时候，检查是否以导航栏路径开头即可，否则可能无法高亮显示
const isActive = (path) => {
    return route.path.startsWith(path)
    // return route.path === path
}

</script>